<template>
  <div class="test" ref="body">
    <div class="ymd ymddiv" :style="ymdstyles" ref="ymd">{{ ymd }}</div>
    <div class="time timediv" :style="timestyles" ref="val">{{ time }}</div>
  </div>
</template>
<script>
import dayjs from "dayjs";

import titlemixins from "@/mixins/bigScreen/titlemixins";
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "zzbptest",
  mixins: [titlemixins, commonmixins],
  components: {},
  data() {
    return {
      time: "",
      ymd: "",
    };
  },
  computed: {
    linglongstyleses() {
      return {
        height: "100%",
      };
    },
    timestyles() {
      return {
        fontSize: this.scale * 35 + "px",
      };
    },
    ymdstyles() {
      return {
        fontSize: this.scale * 20 + "px",
        color: "#50C9FF",
      };
    },
  },
  watch: {},
  mounted() {
    this.loadData();
    this.$refs['ymd'].style.marginTop = this.getscalepx(12);
    this.$refs['ymd'].style.marginRight = this.getscalepx(10);
    this.$refs['body'].style.marginTop = this.getscalepx(10);
    this.$refs['body'].style.marginLeft = this.getscalepx(20);
    this.$refs['body'].style.width = this.getscalepx(370);

    // 字体
    this.$refs['ymd'].style.fontSize = this.getscalepx(25);
    this.$refs['val'].style.fontSize = this.getscalepx(45);
  },
  methods: {
    loadData() {
      setInterval(() => {
        let aWeekTxt = [
          "周日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "周六",
        ];

        let week = aWeekTxt[Number(dayjs().format("d"))];
        this.ymd = dayjs().format("YYYY年MM月DD日 ");
        this.time = dayjs().format(" HH:mm:ss");
      }, 1000);
    },
  },
};
</script>
<style lang='scss' scoped>
.test {
  display: flex;
}
.titletime {
  height: 100%;
}
.timediv {
  font-family: DS-Digital;
  /*font-size:70px;*/
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
</style>